{% extends "meetup_group_frame.html" %}
{% load location_filter %}
{% block title %}
加入碰头小组----新生活从此开始!
{% endblock %}

{% block custom_header %}
<!-- CommentBoard stuff-->
<!--<script type="text/javascript" src="/static/js/jquery.floatdialog.js"></script>-->
<script type="text/javascript" src="/static/js/jquery.form.js"></script>
<script type="text/javascript"> 
  var boardId = {{group.comment_board.id}};
  var groupId = {{group.id}};
  var last_dist = '{{default_district}}';
</script>
<script type="text/javascript" src="/static/commentboard/commentboard.js"></script>
<script type="text/javascript" src="/static/js/meetup_group_modify.js"></script>
<script type="text/javascript" src="/static/js/meetup_group_create.js"></script>
<script type="text/javascript" src="/static/js/meetup_charsets.js"></script>

<link rel="stylesheet" href="/static/css/jquery-ui.css" type="text/css"/>
<script type="text/javascript" src="/static/js/jquery-ui.js"></script>

<link href="/static/commentboard/cb_style.css" rel="stylesheet" type="text/css" />
<!--<link href="/static/css/floatdialog.css" rel="stylesheet" type="text/css" />-->
<style type="text/css">
  .D_eventDate a:hover{text-decoration:none}
  .nohover a:hover{text-decoration:none}
</style>

{% endblock %}

{% block content %}

<!-- start content of the page-->
<div id="C_page" class="vcard">
	<div id="C_pageDividerBlock"></div>
	
	<!-- start content of page header-->
	<div id="C_contextHead">
		<div id="C_contextHeadBody">
			<div id="C_contextTitle">
				<a class="url" href="/group/{{ group.id }}">
					<span id="bannerGroupName" class="fn org g_name_field">{{group.name}}</span>
				</a>
			
			
			
			
			
			
			
				{% if creator %} 
				<button id="edit_group" class="ui-button ui-state-default ui-corner-all">编辑</button>
				
				<div id="dialog" title="更新群组信息。。。" style="display:none">
					<b><p id="validateTips" >在下方输入要更新的信息</p></b>
					
					
					<form id="g_update_form" method="post">
						
						<fieldset>
							<div class="D_boxsection">
								<label><b>活动地点:</b></label>
								<select name="city" id="city" class="locNameUpdateCountry, ui-widget-content ui-corner-all">
									{% for city in city_district %}
									<option value="{{city}}"{% ifequal city default_city %} SELECTED{%endifequal%}>{{city}}</option>
									{% endfor %}
								</select>
								<select name="district" id="district" class="ui-widget-content ui-corner-all">
									{% for district in city_district.北京 %}
									<option value="{{district}}">{{district}}</option>
									{%endfor%}
								</select>
								
								
								<br><label><b>小组名称:</b></label>
								<input name="groupname" id="g_update_name" style="width: 18em! important; margin-bottom:0.5em;margin-top:0.5em;" value="{{group.name}}" maxlength="60" class="text ui-widget-content ui-corner-all locNameUpdateName" type="text">
								<br><label><b>主页标题:</b></label>
								<input name="title" id="g_update_title" style="width: 18em! important; margin-bottom:0.5em;" value="{{group.title}}" maxlength="60" class="text ui-widget-content ui-corner-all locNameUpdateName" type="text">
								<br><label><b>成员上限:</b></label>
								<input id="g_update_limit" style="width: 8em! important; margin-bottom:0.5em;" class="text ui-widget-content ui-corner-all" name="member_limit" value="{{group.member_limit}}" type="text">
								<br><label><b>小组宣言:</b></label>
								<textarea style="width: 20em ! important; height: 6em; margin-left:2.5em; margin-bottom:0.5em;" name="description" id="g_update_desc" value="{{group.description}}" class="ui-widget-content ui-corner-all">{{group.description}}</textarea>
								
								<br><label><b>上传头像:</b></label>
								<input type="file" id="g_update_photo" name="picture"class="ui-widget-content ui-corner-all"/>
							</div>
							<div class="D_boxsection">
								<input id="notify_all" type="checkbox" style="margin-left:3em;" name="notify_others" value="true" class="ui-widget-content ui-corner-all checkbox"><span style="margin-left:1em; color:#D22A2C;"><b>发邮件通知参与者?</b></span>
							</div>
						</fieldset>
					</form>
				</div>
			{% endif %}
			

			</div>
		</div>
	</div>
	<!-- end content of page header-->

	<div id="C_pageBody">
		<div id="C_context">
		<div id="C_document" class="" style="margin:0 0 0 0;">
			<div class="D_docsection divby7">
				
				<!-- first column -->
				<DIV class="D_col D_docCol spans5 first">
					
					<!-- first column body -->
					<DIV class=D_colbody>
				
						<!-- start of D_box -->
						<DIV class=D_box> 
							<DIV class=D_boxbody> 
								<DIV class=D_boxhead> 
									<SPAN class=D_info>群组宣言</SPAN> 
									<H1 class=ieProof><span class="g_title_field">{{ group.title }}</span></h1>
								</DIV> 
								
								<!-- end of D-boxhead-->
								
								<!-- start -->
								
									<DIV class=D_boxsection> 
										
										<!-- group introduction  -->
										<DIV class=D_groupSummary> 
											
											<!--group picture -->
											<div class="D_groupPic">
											<a class="g_pic_url" href="{{group.picture.url}}">
											<img class="photo g_pic_url" alt="" src="{{group.picture.url}}"/>
											</a>
											</div>
											<!-- end of group picture -->
					
											<!--group stats -->
											<DIV class=D_groupStats> 
												
												<!-- Column 1 -->
												<DIV class="D_boxcols divby5">
													<!-- found place --> 
													<DIV class="D_col spans3 first"> 
														<DIV class=D_colbody> 
															<DL class=stats> 
																<DT class=statLabel>成立地点 
																	<DD class=adr id=groupLoc>
																		<SPAN class=locality></SPAN><SPAN class=region id="g_location">{{ group.location|code_to_location}}</SPAN> 
																	</DD> 
																</DT>
															</DL>
														</DIV>
													</DIV> 
													<!--activities count -->
													<DIV class="D_col spans2 last"> 
														<DIV class=D_colbody> 
															<DL class="stats col"> 
																<DT class=statLabel>举办的活动 
																	<DD id=groupEventCount>{{past_meetups|length}} 至今 </dd>
																</DT>
															</DL>
														</DIV>
													</DIV>
												</DIV>
												<!-- end of column 1-->
												<!-- column 2 -->
												<DIV class="D_boxcols divby5">
													<!-- members description -->
													<DIV class="D_col spans3 first">
														<DIV class=D_colbody> 
															<DL class=stats> 
																<DT class=statLabel>成员人数 
                                <DD id=groupMemCount>{{group.users.all|length}}/<span class="g_memeber_limit">{{group.member_limit}}</span>
																	</DD>
																</DT>
															</DL>
														</DIV>
													</DIV>
													<!-- votes -->
													<DIV class="D_col spans2 last">
														<DIV class=D_colbody> 
															<DL class="stats last"> 
																<DT class=statLabel>创始人
																	<DD class=hReview-aggregate id=groupRating>
																		<SPAN class=fn><strong>{{ group.creator.profile.name }}</strong> </SPAN></SPAN> 
																	</DD>
																</DT>
															</DL>
														</DIV>
													</DIV>
												</DIV>
												<!-- end of column 2-->
												
												 <!-- column 3 -->
												<DIV class="D_boxcols divby5"> 
													
													<!-- row 1: topics -->
													<DIV class="D_col spans3 first"> 
														<DIV class=D_colbody> 
															<DL class="stats last"> 
																<DT class=statLabel>成立日期
																	<DD id=groupFounded>{{ group.found_date|date:"Y年m月d日" }} </dd>
																</DT>
															</DL>
														</DIV>
													</DIV>
													 
													 <!-- row 2: found date -->
													<!-- end of row 2-->
												</DIV>
												<!-- end of column 3 -->
											</DIV>
											<!-- end of group stat-->
										</DIV>
										<!-- end of group introduction-->
									</DIV> 
									<!-- end of box section -->
									<!-- start of D_boxsection-->
									<DIV class=D_boxsection> 
										<DIV class=groupDesc>
											<P><span class="g_description_field">{{ group.description }}</span> </P>
										</DIV>
                  </DIV> <!-- end of D_boxsection -->
                </DIV> <!-- end of D_boxbody -->
              </DIV> <!-- end of D_box -->
                  
				  
              {% if next_meetup %}
              <DIV class=D_box>
                <DIV class=D_boxbody>
                  <DIV class=D_boxhead>
                    <h2><span class="D_segue">看看我们下一次碰头吧</span><a href="/group/{{group.id}}/meetup/details/{{next_meetup.id}}/" class="omnCamp omnrv_rv5">{{next_meetup.topic}}</a></h2> 
                  </DIV>
                  <DIV class=D_boxsection>
                    
                    <div class=D_eventSummary>
                      
                      <div class="D_eventDate">
                        <a href="/group/{{group.id}}/meetup/details/{{next_meetup.id}}">
									            <div class="D_tearSheet">
									                <div class="date">
									                    <span class="month">{{ next_meetup.time_from|date:"m月" }}</span>
									                    <span class="day">{{ next_meetup.time_from|date:"d" }}</span>
									                </div>
									                <div class="daytime">
									                    <span class="dow">{{ next_meetup.time_from|date:"w" }}</span>
									                    <span class="time">{{ next_meetup.time_from|date:"H:i" }}</span>
									                </div>
									            </div>
                        </a>
                        </DIV>
                        <div class="D_eventStats">
                          <div class="D_boxcols divby3">
									                <div class="D_col first">
									                    <div class="D_colbody">
									                        <dl class="stats">
									                            <dt class="statLabel">
                                              碰头地点
                                              </dt>
                                               <dd class="meetupLoc">
									                            	{% if joined %}
									                                <div>
            								      									{{ next_meetup.address}}
									                                </div>
						              											{% else %}
																	                <div  class="D_empty">
                																		碰头地点只有群组用户可见，如果您已经是该群组的成员，请登录查看。
								                									</div>
																                	{% endif %}
									                            </dd>
                                          </dl>
                                      </div>
                                  </div>
                                  <div class="D_col second">
									                    <div class="D_colbody">
									                        <dl class="stats">
									                            <dt class="stateLabel">
                                                参与情况
									                            </dt>
                                              
                                              <dd class="D_meetupAttendees">
                                                      <span class="D_yes">{{next_meetup.participation.definite}} 确定</span>
									                                    / <span class="D_maybe">{{next_meetup.participation.undecided}} 未定</span>
                                                      / <span class="D_no">{{next_meetup.participation.refused}}不去</span>
									                            </dd>
									                        </dl>
									                     </div>
									                </div>
                                  <div class="D_col last">
                                    <div class="D_colbody">
                                      <div class="calltoaction"> 
                                        {% if user.is_authenticated and joined %}
                                        <form action="meetup/participate/" method="post"> 
                                          <h4>想参加这次碰头吗?</h4> 
                                          <div class="D_submitContainer"> 
                                            <input type="submit" name="submit" value="我要参与!" class="D_submit"  /> 
                                            <input type="hidden" id="response_yes" name="response" value="1"/> 
                                            <input type="hidden" name="meetup_id" value="{{next_meetup.id}}"/> 
                                           </div> 
                                         </form> 
                                         {% endif %}

                                         {% if user.is_authenticated and not joined %}
                                         <h4>您必须先加入这个碰头组才有机会参加这次碰头! </h4>
                                         {% endif %}

                                         {% if not user.is_authenticated %}
                                          <h4>还没有碰头吧账户?</h4>
                                          <form action="/accounts/register/" method="get">
                                          <div class="D_submitContainer">
                                            <input type="submit" name="submit" value="注册一个吧!" class="D_submit" />
                                          </div>
                                          </form>
                                         {% endif %}
                                        </div> 
									                  </div>
									                </div>
                          </div>
                        </div>
                      </div> <!-- end of D_eventSummary -->
                    </div>	<!-- end of D_boxsection -->

                    <div class="D_boxsection">
                       {{next_meetup.description}}
                    </div>
                </DIV> <!-- end of D_boxbody -->
              </DIV> <!-- end of D_box -->
              {%endif%}
			  
			  
			  
              <DIV class=D_box>
                <DIV class=D_boxbody>
                  <!-- start of D_boxsection-->
                  <DIV class=D_boxhead>
                    <h3>看看组员们都在说些什么?</h3>
                  </DIV>
                  <DIV class=D_boxsection>
                    <script type="text/javascript" src="/static/commentboard/cb_content.js"></script>	
                  </DIV>
                  <!-- end of D_boxsection-->
								</DIV> 
								<!-- end of D_boxbody-->
							</DIV> 
							<!-- end of D_box -->

							<!-- need insert from here -->
              <div class="D_docsection divby2">
          <div class="D_col D_docCol first">
          	<div class="D_colbody">
              <div  class="D_box">
              	<div class="D_boxbody">
                  <div class="D_boxhead">
                  <h3>未来更多的碰头</h3>
                  </div>
                    {% for meetup in upcoming_meetups %}
                   <div class="D_boxsection">
                    <div class=D_eventSummary>
                      
                      <div class="D_eventDate">
                        <a href="/group/{{group.id}}/meetup/details/{{meetup.id}}">
									            <div class="D_tearSheet">
									                <div class="date">
									                    <span class="month">{{ meetup.time_from|date:"m月" }}</span>
									                    <span class="day">{{ meetup.time_from|date:"d" }}</span>
									                </div>
									                <div class="daytime">
									                    <span class="dow">{{ meetup.time_from|date:"w" }}</span>
									                    <span class="time">{{ meetup.time_from|date:"H:i" }}</span>
									                </div>
									            </div>
                        </a>
                        </DIV>
                        <div class="D_eventStats">
                           <div class="D_info">
									                <div class="D_title">
                                     <a href="/group/{{group.id}}/meetup/details/{{meetup.id}}">
                                       <strong>{{meetup.topic}} </strong>
                                      </a>
                                  </div>
                                  <div class="D_body">
                                       {{meetup.description|truncatewords:2}}
                                  </div>
                            </div>
                        </div>
                      </div>
                  </div>
                  {% endfor %}
                </div>
              </div>
            </div>
          </div>

          <div class="D_col D_docCol last IE_lastCol">
          	<div class="D_colbody">
              <div  class="D_box">
              	<div class="D_boxbody">
                  <div class="D_boxhead">
                    <h3>以前的碰头</h3>
                  </div>
                   {% for meetup in past_meetups %}
                   <div class="D_boxsection">
                    <div class=D_eventSummary>
                      
                      <div class="D_eventDate">
                        <a href="/group/{{group.id}}/meetup/details/{{meetup.id}}">
									            <div class="D_tearSheet">
									                <div class="date">
									                    <span class="month">{{ meetup.time_from|date:"m月" }}</span>
									                    <span class="day">{{ meetup.time_from|date:"d" }}</span>
									                </div>
									                <div class="daytime">
									                    <span class="dow">{{ meetup.time_from|date:"w" }}</span>
									                    <span class="time">{{ meetup.time_from|date:"H:i" }}</span>
									                </div>
									            </div>
                        </a>
                        </DIV>
                        <div class="D_eventStats">
                           <div class="D_info">
									                <div class="D_title">
                                     <a href="/group/{{group.id}}/meetup/details/{{meetup.id}}">
                                       <strong>{{meetup.topic}} </strong>
                                      </a>
                                  </div>
                                  <div class="D_body">
                                       {{meetup.participation.definite}}人参加了该碰头
                                  </div>
                            </div>
                        </div>
                      </div>
                  </div>
                  {% endfor %}
                </div>
              </div>
            </div>
          </div>
        </div>
				
					</DIV>
					<!-- end of first column body-->
					
				</DIV>
				<!-- end of first column-->

					<!-- the last column-->
					
					<DIV class="D_col D_docCol spans2 last IE_lastCol">
						<DIV class=D_colbody>
							<DIV class="D_box">
								<DIV class=D_boxbody>
									<DIV class=organizer style="text-align:center;">
										<DIV class=label>小组创始人</DIV> 
                    <DIV class="value nohover">
                      <a href="/accounts/profile/?uid={{group.creator.id}}">
			                <img src="{{group.creator.profile.photo.url}}"><br>
											<STRONG>
												{{ group.creator.profile.name }} 
                      </STRONG>
                      </a>
										</DIV>
									</DIV>
								</DIV>
							</DIV>
							<DIV class="D_box calltoaction">
								<DIV class=D_boxbody>
									<DIV class=D_boxhead>
										{% if joined %}
                    <H2>欢迎你，<br/>{{ user.profile.name }} </H2>
										<P>是不是该聚聚了？！</P>
										{% else %}
										<H2>加入<span class="g_name_field">{{group.name}}</span>聚会</H2>
										<P>您将在新的聚会开始时收到邀请！</P>
										{% endif %}
									</DIV>

                  <!-- start D_boxsection-->
                  <DIV class=D_boxsection>


                    <!-- start of the register form-->
                    {% if anonymous %}
                    <FORM action="/accounts/login/" method="post">
                      {% endif %}
                      {% if not joined and not creator %}
                      <form action="/groups/join/" method="post">
                        {% endif %}
                        {% if creator %}
                        <form action="meetup/create" method="get">
                          {% endif %}
                          {%if anonymous %}
                          <!-- start of D_form_short D_form-->
                          <DIV class="D_form_short D_form">
                            <DIV class="element">
                              <DIV class=label style="width:100%;"><LABEL>邮件地址:</LABEL> </DIV>
                              <DIV class=input style="width:100%;margin-left:0;padding-left:0;"><INPUT class=text id=emailInput name=email style="width:160px;margin-left:0;padding-left:0;"> </DIV>
                            </DIV>

                            <DIV class="element">
                              <DIV class=label style="width:100%;"><LABEL>密码:</LABEL> </DIV>
                              <DIV class=input style="width:100%;"><INPUT class=text id=passwordInput type=password name=password style="width:160px;"> </DIV>
                            </DIV>
                            <DIV>
                              <A href="/accounts/register">没有"碰头吧"账户？</A>
                            </DIV>
                          </DIV>
                          <!-- end of the element -->
                          {% endif %}

                          <!-- start footElement-->

                          {% if not joined %}
                          <DIV class=footElement>
                            <INPUT class="D_submit T_button" type=submit value="加入我们!" name=submitButton> 
                            <input type=hidden value="{{ group.id }}" name="group_id" />
                            <input type=hidden value="{{ user.id }}" name="user_id" />
                          </DIV>
                          <!-- end of D_form_short D_form-->
                          {% endif %}

                          {% if creator%}
                          <INPUT class="D_submit T_button" type=submit value="创建新的碰头" name=submitButton onclick=""> 
                          {% endif %}

                        </DIV>
                        <!-- end of the form_short div-->
                      </FORM>
                      <!-- end of the form-->
                    </DIV>
                    <!-- end of D_boxsection-->
                  </DIV>
                  <!-- end of D_boxbody-->

                  <!-- end of D_box calltoaction-->
                  <DIV class="D_box calltoaction">
                    <DIV class=D_boxbody>
                      <DIV class=D_boxhead style="text-align:center">
                        <DIV class="D_boxcols divby2" style="text-align:center">
                          <!-- found place --> 
                          {% for user in group.users.all %}
                          <DIV class="D_col"> 
                            <DIV class=D_colbody> 
                              <dl>
                                <dt>
                                <a href="/accounts/profile/?uid={{user.id}}"> 
                                  <img src="{{user.profile.photo.url}}" width="110" height="110">
                                </a>
                                </dt>
                                <dd>
                                <a href="/accounts/profile/?uid={{user.id}}"><strong>{{user.profile.name}}</strong></a>
                                </dd>
                              </dl>
                            </DIV>
                          </DIV> 
                          {% endfor %}	


                        </DIV>
                      </DIV> 
                    </DIV> <!-- end of D_obxbody -->
                  </DIV> <!-- end of D_box -->
                </DIV>

              </DIV><!-- end of col_body-->
            </DIV><!-- end of IE_lastCol-->
					
				</DIV><!-- end of divide by 7-->

        
			</DIV><!-- end of document-->
	</DIV><!-- end of context-->
	</DIV><!-- end of page body -->
</DIV><!-- end of C_page, class=vcard-->
{% endblock %}
